<template>
	<view class="page order">
		<view class="tabs flex flexC aliC pt10 pb12 bgff">
			<text v-for="(item,index) in tabs" @click="onChangeTabs(index)" class="pb4 flex1 item"
				:class="tabIndex == index ? 'active' : ''" :key="index">{{item}}</text>
		</view>
		<scroll-view scroll-y="true" class="list" @scrolltolower="nextPage">

			<view v-for="item in list" @click="clickDetail(item)">


				<view class="bgff pt18 pb24 px15 mt12" >
					<view class="flex flexC flexB">
						<view class="fs12">{{item.order_no}}</view>
						<text class="cff5" v-if="item.status == 'payed'">待接单</text>
						<text class="cff5" v-else-if="item.status == 'paying'">待支付</text>
						<text class="cff5" v-else-if="item.status == 'taked'">待消费</text>
						<text class="cff5" v-else-if="item.status == 'doing'">消费中</text>
						<text class="cff5" v-else-if="item.status == 'done'">已完成</text>
						<text class="cff5" v-else-if="item.status == 'cancel'">已取消</text>
						<text class="cff5" v-else-if="item.status == 'refund'">已退款</text>

					</view>
					<view class="flex flexB flex1 mt12 pb12 borb">
						<view class="flex flexC flexS">
							<image class="w72 flexSh" :src="item.assistant.logo" mode="widthFix"></image>
							<view class="ml7 w-11">
								<view class="ellipsis2 fs13">{{item.assistant.name}}</view>

								<view class="fs13 mt10">{{item.shop.name}}</view>
								<view class="fs13 mt10">{{item.start}}</view>
								<view class="fs13 mt10">{{item.end}}</view>
								<view class="fs11 c63 mt6"></view>
							</view>

						</view>
						<view class="aliR">
							<view class="bold7">￥{{item.amount}}</view>
						</view>
					</view>

				</view>
				<view class="bgff pr27 flex pb18">
					<view class="fs12 aliR c63 ml15">
						<view class="flex flexC">时长 {{item.hour}}
							<text class="fs13 ml17">总价</text>
							<text class="fs14 bold6 cff5">￥{{item.amount}}</text>
						</view>
					</view>
					<view class="flex  flexC flexJC  mt22" v-if="item.status == 'paying'">
						<view class="btn1">取消订单</view>
						<view class="btn2 ml8">付款</view>
					</view>
					<view class="flex flex1 flexJC flexC mt22" v-else-if="item.status == 'payed'">
						<view class="btn1">取消订单</view>
					</view>
				</view>
			</view>

		</scroll-view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabs: ['全部', '待接单', '待消费', "消费中", '已完成'],
				page: 1,
				list: [{

				}],
				status: "",
				isLastPage: false,
				isnodata: false
			};
		},
		onLoad(option) {
			this.tabIndex = option.index;

		},
		onShow() {

			this.list = [];
			this.status = "";
			this.isLastPage = false;
			this.isnodata = false;
			this.onChangeTabs(this.tabIndex);
		},
		methods: {

			clickDetail(item) {
				uni.navigateTo({
					url: '../assistant/detail?order_no=' + item.order_no
				})
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},
			submit() {
				uni.navigateTo({
					url: '../order/dispatch'
				})
			},


			onChangeTabs(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.status = "";
				} else if (index == 1) {
					this.status = "payed";
				} else if (index == 2) {
					this.status = "taked";
				} else if (index == 3) {
					this.status = "doing";
				} else if (index == 4) {
					this.status = "done";
				}
				this.page = 1;
				this.list = [];
				this.getList();
			},

			getList() {
				let param = {
					page: this.page,
					status: this.status
				}
				let that = this;
				this.$api.assistOrderList(param).then(res => {
					console.info(res);

					if (res.code == 1) {


						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							that.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.order {
		.tabs {
			.item {
				box-sizing: border-box;
				position: relative;

				&.active {
					&::after {
						content: '';
						width: 46upx;
						height: 4upx;
						background-color: #F8B62B;
						position: absolute;
						bottom: -20rpx;
						left: calc(50% - 23upx);
					}
				}
			}
		}

		.list {
			height: calc(100%);

			.bgef {
				background-color: #EFEFEF;
			}

			.logo {
				width: 132upx;
				height: 136upx;
			}

			.ellipsis1 {
				width: 400upx;
			}

			.w72 {
				width: 188upx;
				height: 188upx;
			}

			.borb {
				border-bottom: 2upx dashed #EEEEEE;
			}
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;

			.btn {
				background-color: #F8B62B;
				width: 200upx;
			}
		}

		.c63 {
			color: #636363;
		}

		.btn1 {
			border: 1rpx solid #707070;
			padding: 12rpx 26rpx;
			border-radius: 28rpx;
			font-size: 26rpx;
		}

		.btn2 {
			background-color: #F8B62B;
			padding: 12rpx 54rpx;
			border-radius: 28rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}
</style>